<template>
  <div class="common-layout">
    <el-container>
      <el-header style="height: 100px">
        <div class="custom-icon-container">
          <div class="icon-wrapper">
            <div class="custom-icon">T</div>
            <span class="logo-text">TMom</span>
          </div>
        </div>
        <div class="system-title">智慧MES操作系统</div>
        <div class="header-right-section">
          <!-- 天气按钮 -->
          <el-button type="info" class="weather-btn" @click="goToWeather">
            <el-icon>
              <Sunny />
            </el-icon>
            <span class="weather-text">天气</span>
          </el-button>

          <el-button
            type="success"
            class="notification-btn"
            @click="showTodoDialog"
          >
            <el-icon>
              <Bell />
            </el-icon>
            <el-badge
              v-if="pendingCount > 0"
              :value="pendingCount"
              class="pending-badge"
            />
          </el-button>

          <span class="welcome-text"
            >欢迎{{ pinia.piniaDto.realName
            }}{{ pinia.piniaDto.roleName }}进入系统</span
          >

          <el-button type="primary" class="logout-btn" @click="OutLogin()">
            <el-icon>
              <SwitchButton />
            </el-icon>
          </el-button>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu
            class="el-menu-vertical-demo custom-menu"
            default-active="2"
            router
            @select="handleMenuSelect"
            :default-openeds="openedMenus"
            @open="handleMenuOpen"
            @close="handleMenuClose"
            ref="menuRef"
          >
            <!--//////////////////////////////////////////////////////////////////////////////////////////////////-->
            <el-sub-menu index="0">
              <template #title>
                <el-icon>
                  <el-icon>
                    <Odometer />
                  </el-icon>
                </el-icon>
                <span>仪表盘</span>
              </template>
              <el-menu-item index="/Dashboard">
                <el-icon>
                  <el-icon>
                    <Location />
                  </el-icon>
                </el-icon>
                <span>工作台(wzw)</span>
              </el-menu-item>
              <el-menu-item index="/Weather">
                <el-icon>
                  <el-icon><Sunrise /></el-icon>
                </el-icon>
                <span>天气预报</span>
              </el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="1">
              <template #title>
                <el-icon>
                  <DataBoard />
                </el-icon>
                <span>基础数据</span>
              </template>
              <!--//////////////////////////////////////////////////////////////////////////////////////////////////-->
              <el-sub-menu index="1-1">
                <template #title>
                  <el-icon>
                    <OfficeBuilding />
                  </el-icon>
                  <span>工厂建模</span>
                </template>
                <el-menu-item index="/WorkShop">
                  <el-icon>
                    <House />
                  </el-icon>
                  <span>车间管理(cjh)</span>
                </el-menu-item>
                <el-menu-item index="/ProductionLine">
                  <el-icon>
                    <Operation />
                  </el-icon>
                  <span>产线管理(cjh)</span>
                </el-menu-item>
                <el-menu-item index="/Station">
                  <el-icon>
                    <Tools />
                  </el-icon>
                  <span>工位管理(cjh)</span>
                </el-menu-item>
              </el-sub-menu>
              <!--//////////////////////////////////////////////////////////////////////////////////////////////////-->
              <el-sub-menu index="1-2">
                <template #title>
                  <el-icon>
                    <Box />
                  </el-icon>
                  <span>物料管理</span>
                </template>
                <el-menu-item index="/MaterialGroup">
                  <el-icon>
                    <Box />
                  </el-icon>
                  <span>物料群组(cjh)</span>
                </el-menu-item>
                <el-menu-item index="/ProductMaterials">
                  <el-icon>
                    <Goods />
                  </el-icon>
                  <span>产品物料(cjh)</span>
                </el-menu-item>
                <el-menu-item index="/Bom">
                  <el-icon>
                    <List />
                  </el-icon>
                  <span>BOM(cjh)</span>
                </el-menu-item>
                <el-menu-item index="/MaterialAsk">
                  <el-icon>
                    <CirclePlus />
                  </el-icon>
                  <span>物料申请单(cjh)</span>
                </el-menu-item>
              </el-sub-menu>
            </el-sub-menu>

            <!--//////////////////////////////////////////////////////////////////////////////////////////////////-->
            <el-sub-menu index="1-3">
              <template #title>
                <el-icon>
                  <OfficeBuilding />
                </el-icon>
                <span>用户管理</span>
              </template>
              <el-menu-item index="/ClientSet">
                <el-icon>
                  <House />
                </el-icon>
                <span>客户管理(ls)</span>
              </el-menu-item>
              <el-menu-item index="/SupplierSet">
                <el-icon>
                  <Operation />
                </el-icon>
                <span>供应商管理(ls)</span>
              </el-menu-item>

              <el-menu-item index="/RolePression">
                <el-icon>
                  <Operation />
                </el-icon>
                <span>用户角色与权限管理(ls)</span>
              </el-menu-item>

              <el-menu-item index="/DepartMentView">
                <el-icon><WindPower /></el-icon>
                <span>部门管理页(ls)</span>
              </el-menu-item>
              <el-menu-item index="/DocumentCodeDialog">
                <el-icon><WindPower /></el-icon>
                <span>单据管理(ls)</span>
              </el-menu-item>
            </el-sub-menu>
            <!--//////////////////////////////////////////////////////////////////////////////////////////////////-->
            <el-sub-menu index="2">
              <template #title>
                <el-icon>
                  <List />
                </el-icon>
                <span>工艺管理</span>
              </template>
              <el-menu-item index="/ProcessCategorys">
                <el-icon>
                  <Grid />
                </el-icon>
                <span>工序分类(wzw)</span>
              </el-menu-item>
              <el-menu-item index="/ProcessManagement">
                <el-icon>
                  <Tools />
                </el-icon>
                <span>工序管理(wzw)</span>
              </el-menu-item>
              <el-menu-item index="/ProcessFlow">
                <el-icon>
                  <List />
                </el-icon>
                <span>工艺流程(wzw)</span>
              </el-menu-item>
            </el-sub-menu>

            <!--//////////////////////////////////////////////////////////////////////////////////////////////////-->
            <el-sub-menu index="3">
              <template #title>
                <el-icon>
                  <TrendCharts />
                </el-icon>
                <span>生产管理</span>
              </template>
              <el-menu-item index="/Producetion"
                ><el-icon><ChromeFilled /></el-icon>生产工单(tcy)</el-menu-item
              >
              <el-menu-item index="/Scheduling"
                ><el-icon><Flag /></el-icon>计划排程(cjh)</el-menu-item
              >
            </el-sub-menu>

            <!--//////////////////////////////////////////////////////////////////////////////////////////////////-->
            <el-sub-menu index="4">
              <template #title>
                <el-icon>
                  <Shop />
                </el-icon>
                <span>仓库管理</span>
              </template>
              <el-menu-item index="/WarehouseShow"
                ><el-icon> <Tools /> </el-icon>仓库管理(tcy)</el-menu-item
              >
              <el-sub-menu index="4-2">
                <template #title>
                  <el-icon> <House /> </el-icon>
                  <span>群组管理</span>
                </template>
                <el-menu-item index="/GroupInventoryShow"
                  ><el-icon><MessageBox /></el-icon>群组库存(cjh)</el-menu-item
                >
                <el-menu-item index="/GroupOutIn"
                  ><el-icon> <TrendCharts /> </el-icon
                  >群组出/入库记录(cjh)</el-menu-item
                >
              </el-sub-menu>
              <el-sub-menu index="4-1">
                <template #title>
                  <el-icon> <House /> </el-icon>
                  <span>物料管理</span>
                </template>
                <el-menu-item index="/InventoryShow"
                  ><el-icon><MessageBox /></el-icon>物料库存(tcy/cjh)</el-menu-item
                >
                <el-menu-item index="/OutIn"
                  ><el-icon> <TrendCharts /> </el-icon
                  >物料出/入库记录(cjh)</el-menu-item
                >
                <el-menu-item index="/PurchaseRequest"
                  ><el-icon><GoodsFilled /></el-icon>物料采购单(cjh)</el-menu-item
                >
                <el-menu-item index="/MaterialOutAsk"
                  ><el-icon><GoodsFilled /></el-icon
                  >物料入库申请单(cjh)</el-menu-item
                >
              </el-sub-menu>
            </el-sub-menu>

            <!--//////////////////////////////////////////////////////////////////////////////////////////////////-->
            <el-sub-menu index="6">
              <template #title>
                <el-icon>
                  <Edit />
                </el-icon>
                <span>质量管理(ls)</span>
              </template>
              <el-menu-item index="/QualityInspections">
                <el-icon>
                  <Notebook />
                </el-icon>
                质检检测管理
              </el-menu-item>
              <el-menu-item index="/QualityInspectionAnalysis">
                <el-icon>
                  <PieChart />
                  <!-- 统计分析：保持饼图图标 -->
                </el-icon>
                质检统计分析页
              </el-menu-item>
              <el-menu-item index="/UnqualifiedProductHandler">
                <el-icon>
                  <WarningFilled />
                  <!-- 不合格品处理：保持警示图标 -->
                </el-icon>
                不合格品处理页
              </el-menu-item>
              <el-menu-item index="/QualityStandardManager">
                <el-icon>
                  <Grid />
                  <!-- 标准管理：保持网格图标 -->
                </el-icon>
                质检标准管理页
              </el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="7">
              <template #title>
                <el-icon>
                  <Shop />
                </el-icon>
                <span>财务管理</span>
              </template>
              <el-menu-item index="/upd"><el-icon>
                  <Tools />
                </el-icon>到票管理(tcy)</el-menu-item>
              <el-menu-item index="/addcs"><el-icon>
                  <House />
                </el-icon>出票管理(tcy)</el-menu-item>

              <el-menu-item index="/getTicket"
                ><el-icon>
                  <TrendCharts /> </el-icon
                >到票信息</el-menu-item
              >
              <!-- 新增出票下级菜单 -->
              <el-menu-item index="/getInvoicing"
                ><el-icon>
                  <House /> </el-icon
                >出票信息</el-menu-item
              >
            </el-sub-menu>
            <el-sub-menu index="8">
              <template #title>
                <el-icon>
                  <Shop />
                </el-icon>
                <span>订单管理</span>
              </template>
              <!-- <el-menu-item index="/AddInvoice"><el-icon>
                  <Tools />
                </el-icon>出票管理(tcy)</el-menu-item> -->
              <el-menu-item index="/order"
                ><el-icon> <House /> </el-icon>订单管理(tcy)</el-menu-item
              >
            </el-sub-menu>
          </el-menu>
        </el-aside>

        <el-main>
          <!-- 导航历史区域 -->
          <div class="navigation-tabs" v-if="historyItems.length > 0">
            <div
              class="tab-item"
              v-for="(item, index) in historyItems"
              :key="index"
              :class="{ active: currentPath === item.path }"
            >
              <span class="tab-text" @click="navigateTo(item.path)">{{
                item.title
              }}</span>
              <span
                class="tab-close"
                v-if="historyItems.length > 1 && item.path !== '/Dashboard'"
                @click.stop="removeHistoryItem(index)"
                >×</span
              >
            </div>
          </div>

          <RouterView />
        </el-main>
      </el-container>
    </el-container>
  </div>
  <!-- 浮动客服按钮 -->
  <div>
    <div class="float-chat-button" @click="openChat">
      <el-icon>
        <Service />
      </el-icon>
    </div>
    <!-- 客服聊天弹窗 -->
    <div class="modal" v-show="showModal">
      <div class="modal-content">
        <!-- 关闭按钮 -->
        <button class="close-btn" @click="closeChat">×</button>

        <!-- 标题 -->
        <h2 class="modal-title">AI客服助手</h2>

        <!-- 欢迎语 -->
        <p class="welcome-message">
          您好！我是AI客服助手，有什么可以帮助您的吗？
        </p>

        <!-- 常见问题按钮 -->
        <div class="common-questions">
          <button
            class="question-btn"
            @click="askQuestion('如何修改个人信息？')"
          >
            如何修改个人信息？
          </button>
          <button
            class="question-btn"
            @click="askQuestion('订单什么时候发货？')"
          >
            订单什么时候发货？
          </button>
          <button class="question-btn" @click="askQuestion('如何申请退款？')">
            如何申请退款？
          </button>
        </div>

        <!-- 问答区域 -->
        <div class="chat-content" ref="chatContent">
          <template v-for="(item, idx) in chatList" :key="idx">
            <p class="user-question" v-if="item.type === 'question'">
              {{ item.text }}
            </p>
            <p class="ai-answer" v-else>{{ item.text }}</p>
          </template>
        </div>

        <!-- 输入框 -->
        <div class="input-container">
          <input
            type="text"
            v-model="userInput"
            placeholder="请输入您的问题..."
            @keydown.enter="handleUserInput"
          />
        </div>

        <!-- 提示信息 -->
        <p class="close-tip">按ESC键可关闭对话框</p>
      </div>
    </div>
  </div>
  <!-- 待办通知对话框 -->
  <el-dialog v-model="todoDialogVisible" title="待办事项" width="500px">
    <div v-if="todoList.length > 0">
      <el-table :data="todoList" style="width: 100%">
        <el-table-column prop="message" label="通知内容" />
        <el-table-column prop="code" label="申请单号" width="120">
          <template #default="scope">
            <el-button
              type="primary"
              link
              @click="handleTodoClick(scope.row)"
              >{{ scope.row.code }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-else class="empty-todo">
      <el-empty description="暂无待办事项" />
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { useCounterStore } from "@/stores/counter";
import { ref, onMounted, onUnmounted, nextTick, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import {
  DataBoard,
  OfficeBuilding,
  House,
  Operation,
  Tools,
  Box,
  Goods,
  List,
  Grid,
  TrendCharts,
  Shop,
  CircleCheck,
  Sunny,
} from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import * as signalR from "@microsoft/signalr";
import axios from "axios";
const showModal = ref(false);
const userInput = ref("");
const chatList = ref([
  { type: "question", text: "请问如何修改个人信息？" },
  {
    type: "answer",
    text: '您可以登录个人中心，在"账户设置"中修改您的个人信息，修改后请记得保存。',
  },
]);
const chatContent = ref<HTMLElement | null>(null);

function openChat() {
  showModal.value = true;
}

function closeChat() {
  showModal.value = false;
}

function askQuestion(question: string) {
  chatList.value = [
    { type: "question", text: `请问${question}?` },
    { type: "answer", text: getAnswer(question) },
  ];
  nextTick(() => {
    scrollToBottom();
  });
}

// 生成AI回复
const generateResponse = (userMessage: string): string => {
  const message = userMessage.toLowerCase();

  // 常见问题映射
  const faqMap: Record<string, string> = {
    如何注册账号: "您可以在首页点击“注册”，填写相关信息后即可完成注册。",
    忘记密码怎么办: "请在登录页面点击“忘记密码”，按照提示重置您的密码。",
    如何修改密码: "登录后进入“账户设置”，即可修改您的登录密码。",
    如何绑定手机号: "在个人中心的“账户设置”中可以绑定或更换手机号。",
    如何解绑手机号: "请联系客服协助您解绑手机号。",
    如何绑定邮箱: "在“账户设置”中可以绑定您的邮箱。",
    如何解绑邮箱: "请联系客服协助您解绑邮箱。",
    如何实名认证: "在个人中心点击“实名认证”，按照提示上传相关证件。",
    实名认证失败怎么办: "请检查您的证件信息是否正确，或联系客服获取帮助。",
    如何修改昵称: "在个人中心的“账户设置”中可以修改昵称。",
    如何修改头像: "在个人中心点击头像即可上传新的头像。",
    如何查看订单: "在“我的订单”页面可以查看所有订单详情。",
    订单状态怎么看: "订单详情页会显示订单当前的状态。",
    订单取消后还能恢复吗: "订单取消后无法恢复，如有疑问请联系客服。",
    如何申请发票: "在订单详情页可以申请开具发票。",
    发票什么时候寄出: "发票将在订单完成后7个工作日内寄出。",
    如何联系客服: "您可以通过本页面或拨打客服电话与我们联系。",
    客服电话是多少: "我们的客服电话是400-123-4567，服务时间为9:00-18:00。",
    如何申请售后: "在订单详情页点击“申请售后”，填写相关信息即可。",
    售后服务包括哪些: "包括退换货、维修、技术支持等服务。",
    如何退货: "在订单详情页点击“申请退货”，按照提示操作即可。",
    退货流程是什么: "提交退货申请后，客服会与您联系并安排退货。",
    退货运费谁承担: "如因质量问题退货，运费由我们承担；其他原因请您自理。",
    退款多久到账: "退款将在审核通过后3-7个工作日内原路返回。",
    如何修改收货地址: "在订单未发货前可在订单详情页修改收货地址。",
    订单已发货还能改地址吗: "订单发货后无法修改地址，请联系快递公司协商。",
    如何查询物流: "在订单详情页可查看物流信息和快递单号。",
    快递丢失怎么办: "请联系客服，我们会协助您处理快递丢失问题。",
    商品有质量问题怎么办: "请拍照并联系客服，我们会为您安排售后处理。",
    如何开通会员: "在个人中心或首页点击“开通会员”，选择套餐并支付即可。",
    会员有哪些权益: "会员享受专属折扣、优先客服、积分加倍等权益。",
    会员到期怎么办: "会员到期后可续费继续享受权益。",
    如何充值余额: "在个人中心点击“充值”，选择金额并支付即可。",
    余额可以退款吗: "余额可用于消费，暂不支持退款。",
    积分怎么获得: "购物、评价、参与活动均可获得积分。",
    积分怎么用: "积分可用于兑换礼品或抵扣订单金额。",
    积分有效期多久: "积分自获得之日起一年内有效。",
    如何评价商品: "在订单完成后可在订单详情页进行评价。",
    评价可以修改吗: "评价提交后暂不支持修改。",
    如何删除评价: "如需删除评价，请联系客服协助处理。",
    如何投诉商家: "在订单详情页点击“投诉”，填写相关信息即可。",
    投诉处理时间: "投诉将在3个工作日内处理完毕。",
    如何参加活动: "请关注首页或活动页面，按提示报名参加。",
    活动奖品怎么领取: "获奖后我们会通过短信或站内信通知领奖方式。",
    如何设置收货人: "在下单时填写收货人信息即可。",
    收货人可以更改吗: "订单未发货前可修改收货人信息。",
    如何查询历史订单: "在“我的订单”页面可查询所有历史订单。",
    如何删除订单: "订单完成后可在订单详情页申请删除。",
    删除订单后还能恢复吗: "订单删除后无法恢复，请谨慎操作。",
    如何更换支付方式: "下单时可选择不同支付方式，订单生成后无法更换。",
    支付失败怎么办: "请检查网络或更换支付方式，如仍有问题请联系客服。",
  };

  for (const key in faqMap) {
    if (message.includes(key)) {
      return faqMap[key];
    }
  }

  if (message.includes("你好") || message.includes("hello")) {
    return "您好！很高兴为您服务，请问有什么可以帮您的吗？";
  } else if (message.includes("再见") || message.includes("bye")) {
    return "再见！如果还有其他问题，欢迎随时咨询。";
  } else if (message.includes("谢谢") || message.includes("thank")) {
    return "不客气！这是我应该做的。";
  } else if (message.includes("价格") || message.includes("多少钱")) {
    return "关于价格问题，请访问我们的官网查看最新报价，或留下您的联系方式，我们会有专人为您解答。";
  } else if (message.includes("退款") || message.includes("退货")) {
    return "我们支持7天无理由退换货，请您提供订单号，我会为您查询具体的退款流程。";
  } else if (message.includes("帮助") || message.includes("问题")) {
    return "请您具体描述一下遇到的问题，我会尽力为您提供解决方案。";
  } else if (message.includes("修改") && message.includes("信息")) {
    return '您可以登录个人中心，在"账户设置"中修改您的个人信息，修改后请记得保存。';
  } else if (
    message.includes("订单") &&
    (message.includes("发货") || message.includes("物流"))
  ) {
    return '一般情况下，订单会在付款后24小时内发出，您可以在"我的订单"中查看物流信息。';
  } else {
    return "感谢您的咨询。您提到的内容我已经记录，如需更详细的帮助，请提供更多信息，我会尽力协助您。";
  }
};

function getAnswer(question: string): string {
  switch (question) {
    case "如何修改个人信息？":
      return '您可以登录个人中心，在"账户设置"中修改您的个人信息，修改后请记得保存。';
    case "订单什么时候发货？":
      return "一般情况下，订单会在付款后的24小时内发货，请注意查收物流信息。";
    case "如何申请退款？":
      return '您可以在订单详情页点击"申请退款"按钮，按照提示填写退款原因并提交申请。';
    default:
      return "很抱歉，暂时无法回答这个问题。建议您联系人工客服获取帮助。";
  }
}

function handleUserInput() {
  const input = userInput.value.trim();
  if (input) {
    chatList.value.push({ type: "question", text: `请问${input}?` });
    // 使用 generateResponse 生成AI回复
    const aiResponse = generateResponse(input);
    chatList.value.push({ type: "answer", text: aiResponse });
    userInput.value = "";
    nextTick(() => {
      scrollToBottom();
    });
  }
}

function scrollToBottom() {
  if (chatContent.value) {
    chatContent.value.scrollTop = chatContent.value.scrollHeight;
  }
}

function handleEsc(e: KeyboardEvent) {
  if (e.key === "Escape" && showModal.value) {
    closeChat();
  }
}

onMounted(() => {
  window.addEventListener("keydown", handleEsc);
});
onUnmounted(() => {
  window.removeEventListener("keydown", handleEsc);
});
// 菜单映射表，用于存储路径和标题的对应关系
const menuItemsMap = new Map<string, string>([
  ['/WorkShop', '车间管理'],
  ['/ProductionLine', '产线管理'],
  ['/Station', '工位管理'],
  ['/MaterialGroup', '物料群组'],
  ['/ProductMaterials', '产品物料'],
  ['/Bom', 'BOM'],
  ['/MaterialAsk', '物料申请单'],
  ['/ProcessCategorys', '工序分类'],
  ['/ClientSet', '客户管理'],
  ['/SupplierSet', '供应商管理'],
  ['/ProcessManagement', '工序管理'],
  ['/WarehouseShow', '仓库管理'],
  ['/ProcessFlow', '工艺流程'],
  ['/InventoryShow', '物料库存'],
  ['/GroupInventoryShow', '群组库存'],
  ['/OutIn', '物料出/入库记录'],
  ['/GroupOutIn', '群组出/入库记录'],
  ['/Producetion', '生产工单'],
  ['/Scheduling', '排程计划'],
  ['/QualityInspections', '质量检测管理'],
  ['/QualityInspectionAnalysis', '质量统计分析页'],
  ['/UnqualifiedProductHandler', '不合格品处理页'],
  ['/QualityStandardManager', '质量标准管理页'],
  ['/Dashboard', '工作台'],
  ['/Weather', '天气预报'],
  ['/PurchaseRequest', '物料采购单'],
  ['/MaterialOutAsk', '物料入库申请单'],
  ['/order', '订单管理'],
  ['/upd', '出票管理'],
  ['/addcs', '到票管理'] ,
  ['/DocumentCodeDialog', '单据管理'],
  ["/getInvoicing", "到票"],
  ["/getTicket", "出票"],
]);
type HistoryItem = {
  title: string;
  path: string;
};

const router = useRouter();
const route = useRoute();
const pinia = useCounterStore();
const currentPath = computed(() => route.path);

// 待办相关数据
const pendingCount = ref(0); // 待办数量
const todoDialogVisible = ref(false); // 待办对话框显示状态
const todoList = ref<any[]>([]); // 待办列表
let hubConnection: signalR.HubConnection | null = null; // SignalR连接

// 显示待办对话框
const showTodoDialog = () => {
  todoDialogVisible.value = true;
  // 打开对话框时获取最新待办列表
  fetchTodoList();
};

// 处理待办点击事件
const handleTodoClick = (todo: any) => {
  // 关闭对话框
  todoDialogVisible.value = false;
  // 跳转到物料库存页面，并传递申请单号
  router.push({
    path: "/InventoryShow",
    query: { materialAskCode: todo.code },
  });
};

// 初始化SignalR连接
const initSignalRConnection = async () => {
  try {
    // 创建SignalR连接
    hubConnection = new signalR.HubConnectionBuilder()
      .withUrl("http://localhost:5046/messageHub", {
        accessTokenFactory: () => localStorage.getItem("token") || "",
        withCredentials: true,
      })
      .withAutomaticReconnect()
      .build();

    // 接收物料申请通知
    hubConnection.on(
      "ReceiveMaterialAskNotification",
      (materialAskCode: string, message: string) => {
        ElMessage.info(message);
        // 更新待办数量
        pendingCount.value++;
        // 如果对话框已打开，刷新列表
        if (todoDialogVisible.value) {
          fetchTodoList();
        }
      }
    );

    // 更新待办数量
    hubConnection.on("UpdatePendingCount", (count: number) => {
      pendingCount.value = count;
    });

    // 启动连接
    await hubConnection.start();
    console.log("SignalR连接已建立");

    // 连接成功后获取待办数量
    fetchPendingCount();
  } catch (error) {
    console.error("SignalR连接失败:", error);
    // 5秒后重试
    setTimeout(initSignalRConnection, 5000);
  }
};

// 获取待办数量
const fetchPendingCount = async () => {
  try {
    // 调用API获取待办数量
    const response = await fetch(
      "http://localhost:5046/api/MaterialManagement/GetPendingMaterialAsk",
      {
        headers: {
          Authorization: `Bearer ${localStorage.getItem("token")}`,
        },
      }
    );
    const result = await response.json();
    if (result.code === 200) {
      pendingCount.value = result.data;
    }
  } catch (error) {
    console.error("获取待办数量失败:", error);
  }
};

// 获取待办列表
const fetchTodoList = async () => {
  try {
    // 调用API获取待办物料申请单列表
    const response = await fetch(
      "http://localhost:5046/api/MaterialManagement/GetPendingMaterialAsk?Status=进行中",
      {
        headers: {
          Authorization: `Bearer ${localStorage.getItem("token")}`,
        },
      }
    );
    const result = await response.json();
    if (result.code === 200) {
      // 转换数据格式，适配表格显示
      todoList.value = result.data.map((item: any) => ({
        id: item.id,
        code: item.materialAskCode,
        message: `您有一条待处理物料申请单`,
        status: item.materialAskStatus,
      }));
    }
  } catch (error) {
    console.error("获取待办列表失败:", error);
    ElMessage.error("获取待办列表失败");
  }
};
//退出登录
const OutLogin = () => {
  // 清除Pinia中的用户信息
  Object.assign(pinia.piniaDto, {});
  pinia.piniaDto.accountName = "";
  pinia.piniaDto.realName = "";
  pinia.piniaDto.roleName = "";
  pinia.piniaDto.tokenstr = "";
  // pinia.piniaDto.roleNmae = "";
  pinia.piniaDto.IsLoign = false;

  // 清除localStorage中的token
  window.localStorage.removeItem("token");

  // 清除axios请求头中的token
  delete axios.defaults.headers.common["Authorization"];

  // 断开SignalR连接
  if (hubConnection) {
    hubConnection.stop();
  }

  // 跳转到登录页
  router.push("/");
};
const historyItems = ref<HistoryItem[]>([]);

// 菜单展开状态管理
const openedMenus = ref<string[]>([]);
const menuRef = ref();

// 处理菜单打开事件
const handleMenuOpen = (index: string) => {
  // 定义菜单层级
  const allTopLevelMenus = ["0", "1", "2", "3", "4", "6", "7"];
  const basicDataSubMenus = ["1-1", "1-2", "1-3"]; // 基础数据下的子菜单
  const warehouseSubMenus = ["4-1", "4-2"]; // 仓库管理下的子菜单

  console.log("菜单打开:", index);

  // 添加到打开的菜单列表中
  if (!openedMenus.value.includes(index)) {
    openedMenus.value.push(index);
  }

  // 如果是顶级菜单
  if (allTopLevelMenus.includes(index)) {
    // 关闭所有其他顶级菜单
    allTopLevelMenus.forEach((menuIndex) => {
      if (menuIndex !== index && menuRef.value) {
        menuRef.value.close(menuIndex);
      }
    });

    // 如果打开的不是基础数据菜单，关闭基础数据的所有子菜单
    if (index !== "1" && menuRef.value) {
      basicDataSubMenus.forEach((subMenuIndex) => {
        menuRef.value.close(subMenuIndex);
      });
    }
  }

  // 如果是基础数据下的子菜单
  if (basicDataSubMenus.includes(index)) {
    // 先关闭其他顶级菜单（除了基础数据菜单）
    allTopLevelMenus.forEach((menuIndex) => {
      if (menuIndex !== "1" && menuRef.value) {
        menuRef.value.close(menuIndex);
      }
    });

    // 关闭基础数据下的其他子菜单
    basicDataSubMenus.forEach((menuIndex) => {
      if (menuIndex !== index && menuRef.value) {
        menuRef.value.close(menuIndex);
      }
    });
  }
  
  // 如果是仓库管理下的子菜单
  if (warehouseSubMenus.includes(index)) {
    // 先关闭其他顶级菜单（除了仓库管理菜单）
    allTopLevelMenus.forEach((menuIndex) => {
      if (menuIndex !== "4" && menuRef.value) {
        menuRef.value.close(menuIndex);
      }
    });
  }
};

// 处理菜单关闭事件
const handleMenuClose = (index: string) => {
  console.log("菜单关闭:", index);
  // 从打开的菜单列表中移除
  openedMenus.value = openedMenus.value.filter((item) => item !== index);
};

// 处理菜单选择事件
const handleMenuSelect = (index: string, indexPath: string[]) => {
  // 确保Dashboard标签始终存在
  const hasDashboard = historyItems.value.some(
    (item) => item.path === "/Dashboard"
  );
  if (!hasDashboard) {
    // 直接使用固定的标题，避免未知页面问题
    historyItems.value.push({
      title: "工作台",
      path: "/Dashboard",
    });
  }

  // 特殊处理Dashboard路径
  if (index === "/Dashboard") {
    // 如果点击的是Dashboard菜单项，确保使用正确的标题
    const isDuplicate = historyItems.value.some((item) => item.path === index);
    if (!isDuplicate) {
      historyItems.value.push({
        title: "工作台",
        path: index,
      });
    }
    return;
  }

  // 优先从映射表中获取标题
  let title = menuItemsMap.get(index);

  // 特殊处理 /Producetion 路径
  if (index === "/Producetion") {
    title = "生产工单";
    // 确保更新映射表
    menuItemsMap.set(index, title);
  }
  // 如果映射表中没有，尝试通过DOM获取
  else if (!title) {
    const menuItem = document.querySelector(`.el-menu-item[index="${index}"]`);
    if (menuItem) {
      // 获取所有文本节点内容
      title = Array.from(menuItem.childNodes)
        .filter(
          (node) => node.nodeType === Node.TEXT_NODE || node.nodeName === "SPAN"
        )
        .map((node) => node.textContent?.trim() || "")
        .filter((text) => text)
        .join("");

      // 如果获取到了标题，更新映射表
      if (title) {
        menuItemsMap.set(index, title);
      }
    }
  }

  // 如果仍然没有找到标题，使用默认值
  if (!title) {
    title = "未知页面";
  }

  // 避免重复添加
  const isDuplicate = historyItems.value.some((item) => item.path === index);
  if (!isDuplicate && index) {
    historyItems.value.push({
      title,
      path: index,
    });
  }
};

// 跳转到历史记录的页面
const navigateTo = (path: string) => {
  router.push(path);
};

// 跳转到天气预报页面
const goToWeather = () => {
  router.push("/Weather");

  // 检查是否已有天气预报标签
  const hasWeatherTab = historyItems.value.some(
    (item) => item.path === "/Weather"
  );
  if (!hasWeatherTab) {
    historyItems.value.push({
      title: "天气预报",
      path: "/Weather",
    });
  }
};

// 移除历史记录项
const removeHistoryItem = (index: number) => {
  // 如果只剩一个标签，则不允许关闭
  if (historyItems.value.length <= 1) {
    ElMessage.warning("至少保留一个标签页");
    return;
  }

  // 获取要删除的标签
  const removedItem = historyItems.value[index];

  // 如果是Dashboard标签，不允许关闭
  if (removedItem.path === "/Dashboard") {
    ElMessage.warning("工作台标签不能关闭");
    return;
  }

  // 删除标签
  historyItems.value.splice(index, 1);

  // 如果删除的是当前激活的标签，则跳转到最后一个标签
  if (removedItem.path === currentPath.value) {
    // 跳转到最后一个标签
    const lastItem = historyItems.value[historyItems.value.length - 1];
    router.push(lastItem.path);
  }
};

// 初始化时检查当前路由并连接SignalR
onMounted(() => {
  // 处理当前路径
  const currentPath = router.currentRoute.value.path;

  // 如果当前路径是Dashboard或不是登录页
  if (currentPath && currentPath !== "/") {
    // 首先确保Dashboard标签存在
    const dashboardTitle = "工作台"; // 直接使用固定的标题，避免未知页面问题

    // 检查是否已有Dashboard标签
    const hasDashboard = historyItems.value.some(
      (item) => item.path === "/Dashboard"
    );
    if (!hasDashboard) {
      historyItems.value.push({
        title: dashboardTitle,
        path: "/Dashboard",
      });
    }

    // 如果当前路径不是Dashboard，则添加当前页面的标签
    if (currentPath !== "/Dashboard") {
      // 尝试获取当前页面标题
      let title = menuItemsMap.get(currentPath);

      // 如果映射表中没有，尝试通过DOM获取
      if (!title) {
        // 特殊处理 /Producetion 路径
        if (currentPath === "/Producetion") {
          title = "生产工单";
          // 确保更新映射表
          menuItemsMap.set(currentPath, title);
        } else {
          const menuItem = document.querySelector(
            `.el-menu-item[index="${currentPath}"]`
          );
          if (menuItem) {
            // 获取所有文本节点内容
            title = Array.from(menuItem.childNodes)
              .filter(
                (node) =>
                  node.nodeType === Node.TEXT_NODE || node.nodeName === "SPAN"
              )
              .map((node) => node.textContent?.trim() || "")
              .filter((text) => text)
              .join("");

            // 如果获取到了标题，更新映射表
            if (title) {
              menuItemsMap.set(currentPath, title);
            }
          }
        }
      }

      // 如果仍然没有找到标题，使用默认值
      if (!title) {
        title = "未知页面";
      }

      // 检查是否已有此路径的标签
      const hasPath = historyItems.value.some(
        (item) => item.path === currentPath
      );
      if (!hasPath) {
        historyItems.value.push({
          title,
          path: currentPath,
        });
      }
    }
  }

  // 初始化SignalR连接
  initSignalRConnection();
});

// 组件卸载时断开SignalR连接
onUnmounted(() => {
  if (hubConnection) {
    hubConnection.stop();
  }
});
</script>

<style scoped>
.el-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  background-color: #f5f7fa;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 右侧区域样式 */
.header-right-section {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* 天气按钮样式 */
.weather-btn {
  position: relative;
  border-radius: 12px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
  border: none;
  box-shadow: 0 4px 15px rgba(24, 144, 255, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: visible;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.weather-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: left 0.5s;
}

.weather-btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 25px rgba(24, 144, 255, 0.4);
  background: linear-gradient(135deg, #69c0ff 0%, #40a9ff 100%);
}

.weather-btn:hover::before {
  left: 100%;
}

.weather-btn:active {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 4px 15px rgba(24, 144, 255, 0.3);
}

.weather-text {
  font-size: 14px;
  font-weight: 500;
  color: white;
}

/* 通知按钮美化样式 */
.notification-btn {
  position: relative;
  border-radius: 12px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  border: none;
  box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: visible;
  /* 确保badge不被按钮外框遮挡 */
  z-index: 1;
}

.notification-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: left 0.5s;
}

.notification-btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 25px rgba(34, 197, 94, 0.4);
  background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
}

.notification-btn:hover::before {
  left: 100%;
}

.notification-btn:active {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
}

/* 欢迎文字美化样式 */
.welcome-text {
  color: #1890ff;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  padding: 12px 20px;
  background: linear-gradient(
    135deg,
    rgba(24, 144, 255, 0.1) 0%,
    rgba(24, 144, 255, 0.05) 100%
  );
  border-radius: 12px;
  border: 2px solid rgba(24, 144, 255, 0.2);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.welcome-text::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(24, 144, 255, 0.1),
    transparent
  );
  transition: left 0.6s;
}

.welcome-text:hover {
  background: linear-gradient(
    135deg,
    rgba(24, 144, 255, 0.15) 0%,
    rgba(24, 144, 255, 0.08) 100%
  );
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(24, 144, 255, 0.3);
  border-color: rgba(24, 144, 255, 0.4);
}

.welcome-text:hover::before {
  left: 100%;
}

/* 退出按钮美化样式 */
.logout-btn {
  border-radius: 12px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
  border: none;
  box-shadow: 0 4px 15px rgba(24, 144, 255, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  position: relative;
}

.logout-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: left 0.5s;
}

.logout-btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 25px rgba(24, 144, 255, 0.4);
  background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
}

.logout-btn:hover::before {
  left: 100%;
}

.logout-btn:active {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 4px 15px rgba(24, 144, 255, 0.3);
}

.custom-icon-container {
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.icon-wrapper {
  display: flex;
  align-items: center;
  position: relative;
}

.custom-icon {
  width: 90px;
  height: 90px;
  background-color: #4ade80;
  border-radius: 50%;
  color: white;
  font-size: 52px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 25px 8px rgba(168, 85, 247, 0.8);
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.9);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* 添加流光滑动效果 */
.custom-icon::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  transform: rotate(45deg);
  animation: shine 3s infinite;
  z-index: -1;
}

@keyframes shine {
  0% {
    transform: translateX(-100%) rotate(45deg);
  }

  100% {
    transform: translateX(100%) rotate(45deg);
  }
}

.logo-text {
  font-size: 40px;
  font-weight: bold;
  margin-left: 20px;
  background: linear-gradient(45deg, #4ade80, #14b8a6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 20px rgba(168, 85, 247, 0.8);
}

.system-title {
  font-size: 32px;
  font-weight: bold;
  background: linear-gradient(45deg, #1890ff, #40a9ff, #69c0ff, #91d5ff);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-align: center;
  flex: 1;
  padding: 0 20px;
  text-shadow: 0 0 20px rgba(24, 144, 255, 0.5);
  animation: shimmer 3s ease-in-out infinite;
  position: relative;
}

/* 闪光动画效果 */
@keyframes shimmer {
  0% {
    background-position: 0% 50%;
    text-shadow: 0 0 20px rgba(24, 144, 255, 0.5);
  }

  50% {
    background-position: 100% 50%;
    text-shadow: 0 0 30px rgba(24, 144, 255, 0.8);
  }

  100% {
    background-position: 0% 50%;
    text-shadow: 0 0 20px rgba(24, 144, 255, 0.5);
  }
}

/* 添加额外的发光效果 */
.system-title::before {
  content: "智慧MES操作系统";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(45deg, #1890ff, #40a9ff, #69c0ff, #91d5ff);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: blur(2px);
  opacity: 0.3;
  animation: shimmer 3s ease-in-out infinite;
  z-index: -1;
}

/* 导航标签样式 */
.navigation-tabs {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15px;
  border-bottom: 1px solid #dcdfe6;
  padding: 0 10px;
  background-color: #f5f7fa;
  overflow-x: auto;
  white-space: nowrap;
}

.tab-item {
  display: inline-flex;
  align-items: center;
  padding: 8px 15px;
  margin-right: 5px;
  margin-bottom: -1px;
  border: 1px solid #dcdfe6;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  background-color: #f5f7fa;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
  min-width: 100px;
  justify-content: center;
}

.tab-item:hover {
  background-color: #ecf5ff;
}

.tab-item.active {
  background-color: #fff;
  border-bottom: 2px solid #409eff;
  color: #409eff;
  font-weight: 500;
}

.tab-text {
  flex: 1;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tab-close {
  margin-left: 8px;
  color: #909399;
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  padding: 2px;
  border-radius: 50%;
  transition: all 0.2s;
}

.tab-close:hover {
  color: #f56c6c;
  background-color: rgba(245, 108, 108, 0.1);
}

/* 待办徽章样式 */
.pending-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: 10;
  /* 确保badge不被按钮外框遮挡 */
  pointer-events: none;
}

/* 空待办样式 */
.empty-todo {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}

/* 自定义菜单样式 */
.custom-menu {
  background: linear-gradient(135deg, #f5f7fa 0%, #e4eaf5 100%);
  border-radius: 8px;
  margin: 10px;
  border: 1px solid #e0e0e0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.custom-menu .el-menu-item,
.custom-menu .el-sub-menu__title {
  transition: all 0.3s ease;
  border-radius: 6px;
  margin: 4px 6px;
  /* 菜单文字居中样式 */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* 确保菜单项内容居中对齐 */
.custom-menu .el-menu-item span,
.custom-menu .el-sub-menu__title span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
}

/* 深层菜单项样式优化 */
.custom-menu .el-sub-menu .el-menu-item {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* 确保子菜单的文字也居中 */
.custom-menu .el-sub-menu .el-menu-item span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
}

.custom-menu .el-menu-item:hover,
.custom-menu .el-sub-menu__title:hover {
  background-color: rgba(145, 213, 255, 0.2);
  color: #1890ff;
  transform: translateX(4px);
}

.custom-menu .el-menu-item.is-active {
  background-color: #e6f7ff;
  color: #1890ff;
  font-weight: bold;
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.2);
}

.custom-menu .el-icon {
  color: #1890ff;
  margin-right: 8px;
  transition: all 0.3s ease;
  /* 确保图标在居中布局中正确显示 */
  flex-shrink: 0;
}

.custom-menu .el-menu-item:hover .el-icon,
.custom-menu .el-sub-menu__title:hover .el-icon,
.custom-menu .el-menu-item.is-active .el-icon {
  color: #096dd9;
  transform: scale(1.1);
}

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.custom-menu .el-menu-item,
.custom-menu .el-sub-menu__title {
  animation: fadeIn 0.3s ease-out forwards;
}

.custom-menu .el-menu-item:nth-child(1) {
  animation-delay: 0.05s;
}

.custom-menu .el-menu-item:nth-child(2) {
  animation-delay: 0.1s;
}

.custom-menu .el-menu-item:nth-child(3) {
  animation-delay: 0.15s;
}

.custom-menu .el-sub-menu:nth-child(1) {
  animation-delay: 0.05s;
}

.custom-menu .el-sub-menu:nth-child(2) {
  animation-delay: 0.1s;
}
</style>
<style scoped>
body {
  font-family: "Microsoft YaHei", Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f5f5f5;
}

/* 客服按钮样式 */
.chat-button {
  background-color: #4caf50;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease;
}

.chat-button:hover {
  background-color: #45a049;
}

/* 弹窗样式 */
.modal {
  display: block;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  overflow: auto;
}

.modal[style*="display: none"] {
  display: none !important;
}

.modal-content {
  background-color: white;
  margin: 10% auto;
  padding: 20px;
  border-radius: 8px;
  width: 80%;
  max-width: 600px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  position: relative;
}

/* 标题样式 */
.modal-title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
  border-bottom: 2px solid #e0e0e0;
  padding-bottom: 10px;
}

/* 欢迎语样式 */
.welcome-message {
  font-size: 16px;
  color: #666;
  margin-bottom: 15px;
  line-height: 1.5;
}

/* 常见问题按钮组 */
.common-questions {
  display: flex;
  gap: 10px;
  margin: 15px 0;
  flex-wrap: wrap;
}

.question-btn {
  padding: 8px 16px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  cursor: pointer;
  border-radius: 4px;
  font-size: 14px;
  transition: all 0.3s ease;
  flex: 1;
  min-width: 120px;
}

.question-btn:hover {
  background-color: #e0e0e0;
  transform: translateY(-1px);
}

/* 问答区域样式 */
.chat-content {
  margin: 15px 0;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f9f9f9;
  min-height: 80px;
  max-height: 200px;
  overflow-y: auto;
}

.user-question {
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
}

.ai-answer {
  color: #666;
  line-height: 1.5;
}

/* 输入框样式 */
.input-container {
  margin: 15px 0;
}

input[type="text"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

/* 提示信息样式 */
.close-tip {
  color: #666;
  font-size: 14px;
  margin-top: 15px;
  font-style: italic;
}

/* 关闭按钮样式 */
.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #999;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.close-btn:hover {
  opacity: 1;
}
</style>
<style scoped>
/* 浮动客服按钮样式 */
.float-chat-button {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  transition: all 0.3s ease;
  z-index: 999;
}

.float-chat-button:hover {
  background-color: #45a049;
  transform: scale(1.1);
}
</style>
